<template>
  <transition :name="type">
    <div v-show="show">
      <div :style="{ zIndex, ...styles }" class="animation" ref="animation" >
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: { type: Boolean, default: true },
    type: { type: String, default: 'v' },
    line: { type: String, default: '' },
    zIndex: { type: Number, default: 0 },
    styles: { type: Object, default: null }
  },
  data () {
    return {}
  },
  mounted () {
    console.log(this.$refs.animation)
    const heights = this.$refs.animation.children[0].clientHeight + 'px'
    const widths = this.$refs.animation.children[0].clientWidth + 'px'
    const root = document.documentElement
    root.style.setProperty('--AnimationBottomY--', this.line ? this.line : heights)
    root.style.setProperty('--AnimationTopY--', this.line ? '-' + this.line : '-' + heights)
    root.style.setProperty('--AnimationLeftX--', this.line ? '-' + this.line : '-' + widths)
    root.style.setProperty('--AnimationRightX--', this.line ? this.line : widths)
  }
}
</script>

<style>
.animation {
  position: absolute;
}
.top {
  opacity: 0;
  top: -100px;
  z-index: 999;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
.bottom-enter,
.bottom-leave-to {
  opacity: 0;
  transform: translateY(var(--AnimationBottomY--));
}
.bottom-enter-active,
.bottom-leave-active {
  transition: all 0.5s ease;
}

.top-enter,
.top-leave-to {
  opacity: 0;
  transform: translateY(var(--AnimationTopY--));
}
.top-enter-active,
.top-leave-active {
  transition: all 0.5s ease;
}

.left-enter,
.left-leave-to {
  opacity: 0;
  transform: translateX(var(--AnimationLeftX--));
}
.left-enter-active,
.left-leave-active {
  transition: all 0.5s ease;
}

.right-enter,
.right-leave-to {
  opacity: 0;
  transform: translateX(var(--AnimationRightX--));
}
.right-enter-active,
.right-leave-active {
  transition: all 0.5s ease;
}
</style>
